<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <script language="javascript" type="text/javascript">
        var xmlHttpRequest;
        function presearch(obj) {
            var context = obj.value;
            var searchContext = document.getElementById("searchContext");
            if(context == null || context == ""){
                searchContext.style.display="none";
                return;
            }else{
                xmlHttpRequest = new XMLHttpRequest()
                xmlHttpRequest.open("GET", "/catalog/searchProducts?keyword="+context, true);
                xmlHttpRequest.onreadystatechange = searchProcess;
                xmlHttpRequest.send(null);
            }
        }

        function searchProcess() {
            if(xmlHttpRequest.readyState == 4){
                if(xmlHttpRequest.status == 200){
                    displayResults();
                }
            }
        }

        function displayResults() {
            var searchContext = document.getElementById("searchContext");
            var results = xmlHttpRequest.responseXML.getElementsByTagName("name");
            var childs = "<div onclick=Write(this) onmouseout='recoverColorwhenMouseout(this)' onmouseover='changeColorwhenMouseover(this)'>";
            for(var i = 0; i < results.length; i++){
                childs += results[i].firstChild.nodeValue + "</div><div onclick=Write(this) onmouseout='recoverColorwhenMouseout(this)' onmouseover='changeColorwhenMouseover(this)'>";
            }
            childs += "</div>";
            searchContext.innerHTML = childs;
            searchContext.style.display="block";
        }

        //鼠标悬停时改变div的颜色
        function changeColorwhenMouseover(div){
            div.style.backgroundColor="red";
        }
        //鼠标移出时回复div颜色
        function recoverColorwhenMouseout(div){
            div.style.backgroundColor="";
        }
        //当鼠标带点击div时，将div的值赋给输入文本框
        function Write(div){
            //将div中的值赋给文本框
            document.getElementById("search-input").value=div.innerHTML;
            //让下拉提示框消失
            div.parentNode.style.display="none";
        };
    </script>
</head>

<body>
<header th:fragment="header">
    <div id="Header">
        <div id="Logo">
            <div id="LogoContent">
                <a href="/account/main"><img src="../images/logo-topbar.gif" /></a>
            </div>
        </div>

        <div id="Menu">
            <div id="MenuContent">
                <a href=""><img align="middle" name="img_cart" src="../images/cart.gif" /></a>
                <img align="middle" src="../images/separator.gif" />
                <a th:if="(${session.account} != null) and (${session.authenticated}) " href="/account/accountDate"><img align="middle" src="../../../images/user32.png"></a>
                <a th:if="(${session.account} != null) and (${session.authenticated}) " href="/account/accountDate" th:text="${session.account.username}">Account Username</a>
                <a th:if="(${session.account == null}) or (${!session.authenticated})" href="/account/signin">登录</a>
                <a th:if="(${session.account} != null) and (${session.authenticated}) " href="/account/signout"><img align="middle" src="../images/separator.gif"/>退出</a>
                <img align="middle" src="../images/separator.gif" />
                <a href="../help.html">帮助</a>
            </div>

        </div>

        <div id="Search">
            <div id="searchContent">
                <form action="/catalog/searchProducts" method="post">
                    <input type="text" name="keyword" id="search-input" aria-expanded="true" autocomplete="off" size="14" onkeyup="presearch(this);"/>
                    <input type="submit" name="search" value="搜索"/>
                    <table id="searchContext">

                    </table>
                </form>
            </div>
        </div>

        <div id="QuickLinks">
            <a href="/catalog/viewCategory?categoryId=FISH"><img src="../images/sm_fish.gif" /></a>
            <img src="../images/separator.gif" />
            <a href="/catalog/viewCategory?categoryId=DOGS"><img src="../images/sm_dogs.gif" /></a>
            <img src="../images/separator.gif" />
            <a href="/catalog/viewCategory?categoryId=REPTILES"><img src="../images/sm_reptiles.gif" /></a>
            <img src="../images/separator.gif" />
            <a href="/catalog/viewCategory?categoryId=CATS"><img src="../images/sm_cats.gif" /></a>
            <img src="../images/separator.gif" />
            <a href="/catalog/viewCategory?categoryId=BIRDS"><img src="../images/sm_birds.gif" /></a>
        </div>
    </div>
</header>
</body>
</html>